<template>
  <div class="container">
    <h3 class="h3">加载谷歌地图</h3>
    <h4>
      <el-button
        class="bt"
        type="primary"
        size="mini"
        @click="gmap(1)"
      >中文卫星标记 </el-button>
      <el-button
        type="primary"
        size="mini"
        @click="gmap(2)"
      >英文卫星无标记 </el-button>
      <el-button
        type="success"
        size="mini"
        @click="gmap(3)"
      >地形图</el-button>
      <el-button
        type="success"
        size="mini"
        @click="gmap()"
      >带标签地形图</el-button>
      <el-button
        type="danger"
        size="mini"
        @click="gmap(4)"
      >改变的路线图（路线不明显） </el-button>
      <el-button
        type="danger"
        size="mini"
        @click="gmap(5)"
      >标准路线图 </el-button>
    </h4>
    <div id="vue-openlayers" />
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
// import {useGeographic,fromLonLat,toLonLat,transform} from 'ol/proj'
export default {
  data() {
    return {
      map: null,
      source: new XYZ({
        crossOrigin: 'anonymous'
      })
    }
  },
  mounted() {
    this.initMap()
    this.gmap()
  },
  methods: {

    gmap(n) {
      this.source.clear()
      let url
      switch (n) {
        case 1: // 中文标记影像
          url = 'https://www.google.com/maps/vt?lyrs=y&gl=cn&x={x}&y={y}&z={z}'
          break
        case 2: // 无标记影像
          url = 'https://mt3.google.com/maps/vt?lyrs=s&gl=en&x={x}&y={y}&z={z}'
          break
        case 3: // 地形图
          url = 'https://www.google.com/maps/vt?lyrs=t&gl=en&x={x}&y={y}&z={z}'
          break
        case 4: // 改变的路线图（路线不明显）
          url = 'https://www.google.com/maps/vt?lyrs=r&gl=en&x={x}&y={y}&z={z}'
          break
        case 5: // 标准路线图
          url = 'https://www.google.com/maps/vt?lyrs=m&gl=en&x={x}&y={y}&z={z}'
          break
        default: // 带标签的地图
          url = 'https://www.google.com/maps/vt?lyrs=p&gl=en&x={x}&y={y}&z={z}'
      }
      this.source.setUrl(url)
    },

    initMap() {
      const googleMap = new Tile({
        source: this.source
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [googleMap],
        view: new View({
          center: [13247019.404399557, 4721671.572580107],
          zoom: 7
        })
      })
    }
  }
}
</script>
<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 550px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
.bt{
  margin-left: 200px;
}
</style>

